<template>
  <div class="search-container">
    <div class="search-header">
      <h2>搜索结果: {{ $route.query.q }}</h2>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="单曲" name="songs">
          <div class="song-list">
            <div v-for="song in searchResults.songs" :key="song.id" class="song-item">
              <img :src="song.cover" :alt="song.name" class="song-cover" />
              <div class="song-info">
                <div class="song-name">{{ song.name }}</div>
                <div class="song-artist">{{ song.artist }}</div>
              </div>
              <div class="song-actions">
                <el-button size="small" :icon="VideoPlay" circle />
                <el-button size="small" :icon="Download" circle />
                <el-button size="small" :icon="Plus" circle />
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="歌手" name="artists">
          <div class="artist-grid">
            <div v-for="artist in searchResults.artists" :key="artist.id" class="artist-card">
              <img :src="artist.avatar" :alt="artist.name" class="artist-avatar" />
              <div class="artist-name">{{ artist.name }}</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="专辑" name="albums">
          <div class="album-grid">
            <div v-for="album in searchResults.albums" :key="album.id" class="album-card">
              <img :src="album.cover" :alt="album.name" class="album-cover" />
              <div class="album-info">
                <div class="album-name">{{ album.name }}</div>
                <div class="album-artist">{{ album.artist }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { VideoPlay, Download, Plus } from '@element-plus/icons-vue'

const route = useRoute()
const activeTab = ref('songs')

const searchResults = ref({
  songs: [
    { id: 1, name: '稻香', artist: '周杰伦', cover: 'https://via.placeholder.com/50' },
    { id: 2, name: '青花瓷', artist: '周杰伦', cover: 'https://via.placeholder.com/50' },
    { id: 3, name: '晴天', artist: '周杰伦', cover: 'https://via.placeholder.com/50' }
  ],
  artists: [
    { id: 1, name: '周杰伦', avatar: 'https://via.placeholder.com/100' },
    { id: 2, name: '林俊杰', avatar: 'https://via.placeholder.com/100' }
  ],
  albums: [
    { id: 1, name: '范特西', artist: '周杰伦', cover: 'https://via.placeholder.com/150' },
    { id: 2, name: '叶惠美', artist: '周杰伦', cover: 'https://via.placeholder.com/150' }
  ]
})

const performSearch = () => {
  console.log('搜索:', route.query.q)
  // 这里应该调用搜索API
}

onMounted(() => {
  performSearch()
})

watch(() => route.query.q, () => {
  performSearch()
})
</script>

<style scoped>
.search-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-header h2 {
  margin-bottom: 20px;
  color: #303133;
}

.song-list {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.song-item:hover {
  background-color: #f5f7fa;
}

.song-item:last-child {
  border-bottom: none;
}

.song-cover {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-right: 15px;
}

.song-info {
  flex: 1;
}

.song-name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 4px;
}

.song-artist {
  font-size: 14px;
  color: #909399;
}

.song-actions {
  display: flex;
  gap: 10px;
}

.artist-grid,
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.artist-card,
.album-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.artist-card:hover,
.album-card:hover {
  transform: translateY(-2px);
}

.artist-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.artist-name,
.album-name {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.album-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  margin-bottom: 8px;
}

.album-artist {
  font-size: 12px;
  color: #909399;
}
</style>
